<template>
  <div class="form">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="type == 2 ? '修改类目' : '添加类目'"
      @close="cancel"
    >
      <el-form style="width: 80%" :model="params" :rules="rules" ref="formRef">
        <el-form-item label="名称" label-width="100px" prop="name">
          <el-input
            placeholder="请输入品牌名称"
            v-model="params.name"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌" label-width="100px" prop="brand_id">
          <!-- 选择品牌 -->
          <select-brand
            :list="selectBrand"
            :idList="brandIds"
            @confirm="brandConfirm"
          ></select-brand>
          <div class="form-tip">提示：当前商品所属的品牌</div>
        </el-form-item>
        <el-form-item label="广告图" label-width="100px" prop="banner_image">
          <!-- 选择文件 -->
          <attachment-select-btn
            name="banner_image"
            :dataList="params.banner_image"
            @confirm="fileConfirm"
          >
          </attachment-select-btn>
          <div class="form-tip">提示：图片大小请勿超过300KB</div>
        </el-form-item>
        <el-form-item label="排序" label-width="100px" prop="sort">
          <el-input
            type="number"
            placeholder="请输入品牌排序"
            v-model="params.sort"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="100px">
          <el-radio v-model="params.status" :label="1">启用</el-radio>
          <el-radio v-model="params.status" :label="2">禁用</el-radio>
        </el-form-item>
      </el-form>
      <!-- 具名插槽 -->
      <template #footer>
        <el-button @click="cancel" size="mini">取消</el-button>
        <el-button type="primary" @click="submit" size="mini">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import selectBrand from "@/components/selectBrand"
import { create, update } from "@/api/systemProductBrandCategory"
export default {
  name: "my-form",
  components: { selectBrand },
  data() {
    return {
      type: 1,
      dialogFormVisible: false,
      params: {
        brand_id: "", // 品牌id
        name: "", // 名称
        banner_image: "", // 广告图
        sort: "", // 排序
        status: 1, // 状态 1-启用 2-禁用
      },
      selectBrand: [], // 已选择的品牌
      brandIds: [], // 已选择的品牌id
      rules: {
        name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        brand_id: [
          { required: true, message: "请输入选择品牌", trigger: "blur" },
        ],
        banner_image: [
          { required: true, message: "请上传广告图", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },
    }
  },
  methods: {
    show(type = 1, row) {
      this.type = type
      this.reset()
      this.dialogFormVisible = true
      if (type == 2) {
        const { id, brand_id, name, banner_image, sort, status } = row
        this.params = {
          ...this.params, // 保留已有属性
          id,
          brand_id,
          name,
          banner_image,
          sort,
          status,
        }
        if (row.brand) {
          this.selectBrand = [row.brand]
          this.brandIds = [row.brand_id]
        }
      }
    },
    reset() {
      this.params = {
        brand_id: "", // 品牌id
        name: "", // 名称
        banner_image: "", // 广告图
        sort: "", // 排序
        status: 1, // 状态 1-启用 2-禁用
      }
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate()
      })
    },
    // 品牌选择
    brandConfirm(e) {
      this.selectBrand = e.list
      this.brandIds = e.ids
      this.params.brand_id = e.ids.join(",")
      this.selectBrandCategory = []
      this.brandCategoryIds = []
    },
    // 文件选择
    fileConfirm(e) {
      this.params[e.name] = e.fileList.toString(",")
    },
    // 取消
    cancel() {
      this.reset()
      this.dialogFormVisible = false
    },
    // 提交
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          let url = this.type === 1 ? create(this.params) : update(this.params)
          try {
            const res = await url
            this.$msg.successMsg(res.msg)
            this.cancel()
            this.$emit("refresh")
          } catch (ex) {
            console.log(ex)
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
